<template>
    <div class="">
        <el-dialog title="上传文件" :visible="open" @close="onClose" width="600px" append-to-body>
            <div class="upload-file">
                <el-upload action="" multiple :on-change="getFileInfo" ref="fileUpload" :limit="limit"
                    :on-exceed="handleExceed" :http-request="uploadFileRow" :show-file-list="false"
                    class="upload-file-uploader">
                    <!-- 上传按钮 -->
                    <el-button size="mini" icon="el-icon-upload" type="primary">选取文件</el-button>
                    <!-- 上传提示 -->
                    <!-- <div class="el-upload__tip" slot="tip" v-if="showTip">
                    请上传
                    <template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b> </template>
                    <template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b> </template>
                    的文件
                </div> -->
                </el-upload>
                <!-- 文件表格table -->
                <el-table :data="filesList">
                    <el-table-column label="文件名称" align="left" prop="fileName" />
                    <el-table-column label="文件后缀" align="left" prop="suffix" />
                    <el-table-column label="文件大小(KB)" align="left" prop="sizeKb" />
                    <el-table-column label="备注" align="left" prop="remarks">
                        <template slot-scope="{ row }">
                            <el-input v-model="row.remarks" type="textarea" placeholder="请输入备注"
                                @change="e => handleChange(e)"
                                :autosize="{ minRows: 1, maxRows: 3 }" :style="{ width: '100%' }"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right">
                        <template slot-scope="scope">
                            <el-button type="danger" icon="el-icon-delete" @click="remove(scope.row)"></el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>

            <div slot="footer" class="dialog-footer">
                <el-button type="success" @click="submitForm">上传</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>

        </el-dialog>


    </div>
</template>

<script>
import { upload } from "@/api/business/file"
export default {
    name: 'FileForm',
    props: {
        // 值
        value: [String, Object, Array],
        // 数量限制
        limit: {
            type: Number,
            default: 1,
        },
        // 大小限制(MB)
        // fileSize: {
        //   type: Number,
        //   default: 5,
        // },
        // 文件类型, 例如['png', 'jpg', 'jpeg']
        // fileType: {
        //   type: Array,
        //   default: () => ["doc", "xls", "ppt", "txt", "pdf"],
        // },
        // 是否显示提示
        // isShowTip: {
        //   type: Boolean,
        //   default: true
        // }
    },
    data() {
        return {
            fileType: '1',//上传的文件类型
            filesList: [],//展示的文件列表
            file: { value: '',remarks:'' },//获取要上传的文件对象
            open: false,//打开文件上传弹窗
            // param: { type: "1" },//文件上传的额外参数
            uploadFileUrl: process.env.VUE_APP_BASE_API + '/sys-files/upload'
        }
    },
    methods: {
        onClose() {
            this.open = false
            this.filesList = []
            this.$refs.fileUpload.clearFiles()
        },
        breakOut(value) {
            this.open = value
        },
        // 上传前校检格式和大小
        // handleBeforeUpload(file) {
        //     this.$modal.loading("正在上传文件，请稍候...")
        // },

        //获取到要上传的文件对象
        uploadFileRow(param) {
            // console.log(param)
            this.file.value = param.file
            // console.log(this.file)

        },
        //文件选择之后点击上传之前获取文件信息
        getFileInfo(file, fileList) {
            var fileName = file.name
            var name = fileName.slice(0, fileName.lastIndexOf("."))
            var suffix = fileName.slice(fileName.lastIndexOf("."))
            let param = {}
            param.id = file.uid
            param.fileName = name
            param.suffix = suffix
            param.sizeKb = (file.size / 1024).toFixed(2)
            this.filesList.push(param)
            param = {}
        },
        // 上传成功回调
        // handleUploadSuccess(res, file) {
        //     if (res.code == 200) {
        //         this.open = false
        //         this.$emit('updateList')
        //         this.$modal.msgSuccess(res.msg)
        //         this.$modal.closeLoading()
        //     } else {
        //         this.open = false
        //         this.$emit('updateList')
        //         this.$modal.msgError(res.msg)
        //         this.$modal.closeLoading()
        //     }
        //     this.$refs.fileUpload.clearFiles()
        //     console.log("上传成功")
        // },

        // 删除文件
        remove(row) {
            this.filesList = this.filesList.filter(item => {
                return item.id != row.id
            });
            this.$refs.fileUpload.clearFiles()
        },
        // 文件个数超出
        handleExceed() {
            this.$modal.msgError(`上传文件数量不能超过 ${this.limit} 个!`);
        },
        // 上传失败
        // handleUploadError(err) {
        //     this.$modal.msgError("上传文件失败，请重试")
        //     this.$refs.fileUpload.clearFiles()
        //     this.$modal.closeLoading()
        // },

        //提交上传选择的文件
        submitForm() {
            if (this.file.value) {
                this.$modal.loading("正在上传文件，请稍候...")
                let formData = new FormData();
                formData.append('file', this.file.value);
                formData.append('type', this.fileType);
                formData.append('remarks',this.file.remarks);
                upload(formData).then(result => {
                    if (result.code == 200) {
                        this.open = false
                        this.$emit('updateList')
                        this.$modal.msgSuccess(result.msg)
                    } else {
                        this.open = false
                        this.$emit('updateList')
                        this.$modal.msgError(result.msg)
                    }
                    this.$modal.closeLoading()
                })
                this.$refs.fileUpload.clearFiles()
            } else {
                this.$modal.msgError("请选择需要上传的文件！");
            }

        },
        //取消上传
        cancel() {
            this.open = false
            this.filesList = []
            this.$refs.fileUpload.clearFiles()
        },
        /**
        * 改完之需要重新赋值数据源
        * @param {*} key
        * @param {*} colName 字段名称
        * @param {*} value
        */
        handleChange(value) {
            console.log(value)
            this.file.remarks=value
        },
    }
}
</script>

<style lang="scss" scoped></style>
